Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@os-design/error-boundary
Advanced tools
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
Error Boundary allows you to catch JS errors that occur in the UI. This package is a wrapper that allows you to wrap your components to catch UI errors that may occur inside them.
Install the package using the following command:
yarn add @os-design/error-boundary
Let's assume that we have a component that sometimes throw the error.
import React, { useState } from 'react';
const BadComponent: React.FC = () => {
const [hasError, setHasError] = useState(false);
if (hasError) {
throw new Error('Something happened');
}
return (
<>
<p>I am working!</p>
<button onClick={() => setHasError(true)}>Throw the error</button>
</>
);
};
export default BadComponent;
To catch errors that may occur inside the BadComponent
, wrap it with the ErrorBoundary
as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={<h1>An error occured</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Most likely, you want to print an error message or render the fallback component, depending on the error type (for example, render some component, if there is no network connection).
In this case, you can pass a function to the fallback and get an error like this:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={({ error }) => <h1>{error.message}</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Let's assume that you have a component that throws the «No error connection» error. You successfully render another component with the error message, but what if the user has already restored the Internet connection?
In this case, you also need to render the retry button. When you click on it, the component will try to render again. You can do it in the following way:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
<BadComponent />
</ErrorBoundary>
);
export default App;
useQueryLoader
/ loadQuery
As Relay documentation says:
When using
useQueryLoader
/loadQuery
to fetch a query, in order to retry after an error has occurred, you can callloadQuery
again and pass the new query reference tousePreloadedQuery
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button
onClick={() => {
loadQuery(/* ... */);
retry();
}}
>
Retry
</button>
</div>
)}
>
<MainContent queryRef={queryRef} />
</ErrorBoundary>
);
};
export default App;
useLazyLoadQuery
As Relay documentation says:
When using
useLazyLoadQuery
to fetch a query, in order to retry after an error has occurred, you can attempt to re-mount and re-evaluate the query component by passing it a newfetchKey
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
{(fetchKey) => <MainContent fetchKey={fetchKey} />}
</ErrorBoundary>
);
};
export default App;
FAQs
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
The npm package @os-design/error-boundary receives a total of 9 weekly downloads. As such, @os-design/error-boundary popularity was classified as not popular.
We found that @os-design/error-boundary demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.